window.addEventListener('load',function(){
    
    var li = document.querySelector('.box_dianqi_article_c').querySelector('ul').querySelectorAll('li');
    var box = document.querySelector('.box_dianqi_article_c').querySelector('.box');
    var box1 = document.querySelector('.box_dianqi_article_c').querySelector('.box1');
    var div = document.querySelector('.box_dianqi_article_c')
    var img = document.querySelector('.box_dianqi_article_c').querySelector('img')
    var ul = document.querySelector('.box_dianqi_article_c').querySelector('ul')
    var g = 0;
    var umn = 0
    div.addEventListener('mouseover', function () {
        box.style.display = 'block'
        box1.style.display = 'block'
        clearInterval(tines)
    })
    div.addEventListener('mouseout', function () {
        box.style.display = 'none'
        box1.style.display = 'none'
        tines = setInterval(function () {
            box1.click();
        }, 2000)
    })
    var a = li[0].cloneNode(true);
    ul.appendChild(a)
    imgWidth = img.offsetWidth;
    var fang = true;
    box1.addEventListener('click', function () {
        if (fang) {
            fang = false;
            if (g == li.length) {
            ul.style.left = '0'
            g = 0
        }
        g++
        move(ul, -g * imgWidth,function(){
            fang = true
        });
        umn++
        if (umn == lis.length) {
            umn = 0
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = ''
        }
        lis[umn].style.backgroundColor = '#fff'
        }
    })
    box.addEventListener('click', function () {
        if (fang) {
            fang = false;
            imgWidth = img.offsetWidth;
        g--
        if (g < 0) {
            ul.style.left = ul.offsetWidth - imgWidth
            g = li.length - 1
        }
        move(ul, -g * imgWidth,function(){
            fang = true
        })
        umn--
        if (umn < 0) {
            umn = lis.length -1
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = ''
        }
        lis[umn].style.backgroundColor = '#fff'
        }
    })
    var tines = setInterval(function () {
        box1.click()
    }, 2000)
    var ol = document.querySelector('ol')
    for (var i = 0; i < li.length; i++) {
        var lis = document.createElement('li');
        ol.appendChild(lis)
    }
    ol.children[0].style.backgroundColor = '#fff';

    var lis = document.querySelector('ol').querySelectorAll('li')
    for (var j = 0; j < lis.length; j++) {
        lis[j].setAttribute('index', j);
        lis[j].addEventListener('click', function () {
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = ''
            }
            this.style.backgroundColor = '#fff';
            var index = this.getAttribute('index');
            move(ul, -index * imgWidth)
        })
    }

})